import React, { useState } from 'react'
import { NavBar } from 'antd-mobile'
import { ActionSheet, Cell } from 'react-vant'
import { Form, Input, Button, } from 'antd-mobile'
import { CameraOutline } from 'antd-mobile-icons'

const App = () => {
  const actions = [{ name: '成人' }, { name: '儿童' }, { name: '学生' }]
  const actions1 = [{ name: '二代身份证' }]
  const [visible, setVisible] = useState(-1)
  const onCancel = () => setVisible(-1)
  return (
    <div>
      <NavBar>新增乘客</NavBar>
      <Button block type='submit' color='primary' fill='Outline'>
        <CameraOutline fontSize={20}/>扫描证件添加
      </Button>
      <Cell title='乘客类型' isLink onClick={() => setVisible(1)} />
      <ActionSheet
        visible={visible === 1}
        onCancel={onCancel}
        actions={actions}
      />
      <Form
        layout='horizontal'
        footer={
          <Button block type='submit' color='primary' size='large' shape='rounded'>
            提交
          </Button>
        }
      >
        <Form.Item
          name='name'
          label='姓名'
          rules={[{ required: true, message: '姓名不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入姓名' />
        </Form.Item>


        <Cell title='证件类型' isLink onClick={() => setVisible(1)} />
        <ActionSheet
          visible={visible === 1}
          onCancel={onCancel}
          actions={actions1}
        />

        <Form.Item
          name='code'
          label='证件号码'
          rules={[{ required: true, message: '证件号码不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入证件号码' />
        </Form.Item>
        <Form.Item
          name='tel'
          label='手机号'
          rules={[{ required: true, message: '手机号不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入手机号' />
        </Form.Item>
      </Form>

    </div>
  )
}

export default App
